        <template>
          <div>
            
          <el-card class="Hys_card">
        <el-row>
        <el-col :span="8">
          <el-input
            placeholder="请输入内容" 
            class="input-with-select"
            v-model="list.query"  
            clearable
            @clear="geilist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="geilist"
             ></el-button>
          </el-input>
        </el-col>
        <!-- 搜索区域 -->
        <el-col :span="4"  class="Hys_btn">
          <el-button type="danger" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <el-table
            :data="tableData"
            border
            style="width: 100%" 
            class="Hys_table"
            >
  
            <el-table-column
              prop="username"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="电话">
            </el-table-column>
            <el-table-column
              prop="role_name"
              label="角色">
            </el-table-column>
            <el-table-column label="状态">
          <template v-slot="scope">
            <!-- {{scope.row}} -->
            <el-switch
              v-model="scope.row.mg_state"
              @change="updateUsers(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
            <el-table-column label="操作">
           <template v-slot="scope">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="chazhao(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)"></el-button>
                 <el-tooltip
              class="item"
              effect="dark"
              content="设置权限"
              placement="top"
            >
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-s-tools"
                @click="modificationBtn(scope.row)"
              ></el-button>
            </el-tooltip>
           </template>
            </el-table-column>
      </el-table>

              <!-- 分页 -->
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="list.pagenum"
              :page-sizes="[1,3,5,7,9]"
              :page-size="list.pagesizi"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
    
          </el-card>
           <!-- 添加用户信息 -->
           <el-dialog
                title="添加用户"
                :visible.sync="dialogVisible"
                width="50%"
               >
            <el-form  :model="addFrom" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="addFrom.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="addFrom.password"></el-input>
              </el-form-item>
                 <el-form-item label="邮箱"  prop="email">
                <el-input v-model="addFrom.email"></el-input>
              </el-form-item>
                   <el-form-item label="电话" prop="mobile">
                <el-input v-model="addFrom.mobile"></el-input>
              </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="quxiao">取 消</el-button>
                  <el-button type="primary" @click="addIpt">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 修改的对话框 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisibles"
                width="50%"
               >
              <el-form  :model="Input" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="用户名" >
                <el-input v-model="Input.username" disabled></el-input>
              </el-form-item>
                    <el-form-item label="电话">
                <el-input v-model="Input.email"></el-input>
              </el-form-item>
                    <el-form-item label="邮箱">
                <el-input v-model="Input.mobile"></el-input>
              </el-form-item>
               </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisibles = false">取 消</el-button>
                  <el-button type="primary" @click="xiugai">确 定</el-button>
                </span>
            </el-dialog>
                  <el-dialog
                title="提示"
                :visible.sync="dialogVisibless"
                width="50%"
               >
                    <p>当前角色:{{ modification.username }}</p>
                    <p>超级管理员:{{ modification.role_name }}</p>
                    <p>
                      分配新角色:
                      <el-select v-model="roleId" placeholder="请选择">
                        <el-option
                          v-for="item in role"
                          :key="item.id"
                          :label="item.roleName"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </p>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisibless = false">取 消</el-button>
                  <el-button type="primary" @click="fenpei">确 定</el-button>
                </span>
            </el-dialog>
          </div>
        </template>
        <script>
export default {
  data() {
    return {
      tableData: [],
      list: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      addFrom: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      Input: {
        username: "",
        email: "",
        mobile: ""
      },
      roleId: "",
      role: [],
      modification: {},
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibless: false,
      total: 0,
      ids: ""
    };
  },
  created() {},
  mounted() {
    this.geilist();
  },
  methods: {
    async geilist() {
      const res = await this.$apis.getres(this.list);
      let { data, meta } = res.data;
      if (meta.status == 200) {
        this.tableData = data.users;
        this.total = data.total;
      }
    },
    async addIpt() {
      const res = await this.$apis.addInput(this.addFrom);
      let { meta } = res.data;
      if (meta.status == 201) {
        this.$message.success("创建成功");
        this.geilist();
        this.dialogVisible = false;
      }
    },
    quxiao() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    handleSizeChange(val) {
      this.list.pagesize = val;
      this.geilist();
    },
    handleCurrentChange(val) {
      this.list.pagenum = val;
      console.log(`当前页: ${val}`);
      this.geilist();
    },
    async updateUsers(scope) {
      let id = scope.id;
      let mg_state = scope.mg_state;
      console.log(mg_state, id);
      var res = await this.$apis.updataId(id, mg_state);
      console.log(res);
      let { meta } = res.data;
      console.log(meta);
      if (meta.status == 200) {
        this.$message.success("修改用户状态成功");
      }
    },
    async chazhao(state) {
      let id = state.id;
      this.dialogVisibles = true;
      const res = await this.$apis.Cx({ id });
      let { data } = res.data;
      console.log(data);
      this.Input = data;
    },
    async xiugai() {
      let id = this.Input.id;

      console.log(this.Input);
      const res = await this.$apis.Xg(id, this.Input);

      console.log(res);

      this.$message.success("修改成功");
      this.geilist();
      this.dialogVisibles = false;
    },
    async del(scope) {
      const res = await this.$apis.delID(scope);
      let { meta } = res.data;
      if (meta.status == 200) {
        try {
          await this.$ask("确定删除嘛？");
          this.$message.success("删除成功");
          this.geilist();
        } catch (error) {
          console.log(error);
        }
      }
    },
    async modificationBtn(scope) {
      this.ids = scope.id;
      this.dialogVisibless = true;
      const res = await this.$apis.Zt(this.ids, this.roleId);
      console.log(res);
      let { data, meta } = res.data;
      if (meta.status == 200) {
        this.role = data;
      }
      this.modification = scope;
    },
    async fenpei() {
      console.log(this.ids);
      console.log(this.roleId);
      const res = await this.$apis.Fp(this.ids, this.roleId);
      console.log(res);
      let { meta } = res.data;
      if (meta.status == 200) {
        this.$message.success("更新成功");
        this.dialogVisibless = false;
      }
    }
  }
};
</script>
<style lang="scss">
.Hys_card {
  margin-top: 10px;
}
.Hys_btn {
  margin-left: 30px;
}
.Hys_table {
  margin-top: 10px;
}
</style>

